<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load("language", "1");

function say12(text) {
    $('#dialog1').append('Ru: ' + text + '<br>');
    google.language.translate(text, "ru", "en", function(result) {
        $('#dialog2').append('Ru: ' + result.translation + '<br>');
    });
}

function say21(text) {
    $('#dialog2').append('En: ' + text + '<br>');
    google.language.translate(text, "en", "ru", function(result) {
        $('#dialog1').append('En: ' + result.translation + '<br>');
    });
}


$(document).ready(function(){
    $("#speaker1").keypress(function (e) {
        if (e.which == 13) {
            text = this.value;
            say12(text);
            this.value = '';
        }
    });
    $("#speaker2").keypress(function (e) {
        if (e.which == 13) {
            text = this.value;
            say21(text);
            this.value = '';
        }
    });
});
</script>

<table width="100%">
<tr><td width="50%">
    <h3>Ru</h3>

</td><td>
&nbsp;&nbsp;&nbsp;&nbsp;
</td><td width="50%">
    <h3>En</h3>
</td></tr>
<tr><td width="50%">
    <div style="border:solid 1px;" id="dialog1"></div>
</td><td>
&nbsp;&nbsp;&nbsp;&nbsp;
</td><td width="50%">
    <div style="border:solid 1px;" id="dialog2"></div>
</td></tr>
<tr><td width="50%">

</td><td>
&nbsp;&nbsp;&nbsp;&nbsp;
</td><td width="50%">
</td></tr>
<tr><td width="50%">
    <input style="width:390px;" type="text" id="speaker1">
</td><td>
&nbsp;&nbsp;&nbsp;&nbsp;
</td><td width="50%">
    <input style="width:390px;" type="text" id="speaker2">
</td></tr>
</table>